<template>
  <BlurView
    class="account-form"
    :image="image"
    :blur="15"
    color="#fff"
    :opacity="0"
  >
    <BlurView
      class="form-blur-view"
      :class="wrapperClassName"
      color="rgb(36,37,42)"
      :opacity="0.75"
      :blur="0"
    >
      <div class="form-div" :class="containerClassName">
        <form @submit.prevent="handleClickButton">
          <h2 class="title">{{ title }}</h2>
          <slot></slot>
        </form>
      </div>
    </BlurView>
  </BlurView>
</template>

<script>
// @ is an alias to /src
import BlurView from "@/components/BlurView.vue";

export default {
  name: "AccountForm",
  components: { BlurView },
  props: {
    title: {
      type: String,
      required: true
    },
    containerClassName: {
      type: [String, Array],
      default: ""
    },
    wrapperClassName: {
      type: [String, Array],
      default: ""
    }
  },
  data() {
    return {
      image: require("@/assets/images/bg.jpg"),
      username: "",
      password: "",
      login_loading: false,
      error: "",
      message: "",
      login_success: false,
      target: ""
    };
  },
  created() {
    this.target = this.$route.query.target || "";
    this.appid = this.$route.query.appid || "";
  },
  methods: {
    handleClickButton() {
      this.$emit("submit");
    }
  }
};
</script>

<style lang="less" scoped>
@import "../assets/common.less";
.full {
  width: 100%;
  height: 100%;
}
.account-form {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  font-size: 1rem;

  @form-width: 325;
  @form-height: 420;
  .form-blur-view {
    overflow: hidden;
    width: @form-width / @fontsize * 1em;
    // height: @form-height / @fontsize * 1em;
    padding: 3em 0;
    transform: translate(-50%, -50%);
    position: relative;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    font-family: "ProximaNova-Regular";
    font-size: 1rem;

    .form-div {
      .full;
      display: flex;
      justify-content: center;
      align-items: center;

      #error,
      #message {
        font-size: 0.8em;
      }

      #error {
        color: #ff4141;
      }

      > form {
        width: 205 / @form-width * 100%;
        height: 300 / @form-height * 100%;

        @title-height: 30 / @fontsize * 1em;
        .title {
          color: #ccc;
          margin: 0;
          height: @title-height;
          line-height: @title-height;
          text-transform: uppercase;
        }
      }
    }

    @media screen and (max-width: 360px) {
      font-size: 14px;
    }
  }
}
</style>
